@charset "utf-8";
/* @import url(/css/common.css); */

/* 레이아웃 */
#top-area {position:relative; padding-top:20px; width:980px; margin:0 auto; z-index:10;}
#s-content {position:absolute; top:281px; bottom:0; width:100%; border-top:1px solid #e0e0e0;}
#category {position:absolute; top:-40px; width:100%; border-top:1px solid #e0e0e0;}
#list-area {position:absolute; width:490px; height:100%; border-right:1px solid #d0d0d0; overflow-y:scroll;}
#map-area {position:absolute; left:490px; right:0; height:100%;}
#s-content.search {top:241px;}
#s-content.search #category {display:none;}

/* 상단 */
#top-area .tab-box {float:left; position:relative; width:568px;}
#top-area .tab-box .state {position:absolute; top:11px; left:248px; font-size:11px; color:#999;}
#top-area .tab-box .state em {font-weight:bold; color:#24364a;}
#top-area .tab-box .tab-navi {position:relative; height:33px; border-bottom:0;}
#top-area .tab-box .tab-navi li {float:left; border:1px solid #c8c8c8; background:#f7f7f7; margin-right:-1px;}
#top-area .tab-box .tab-navi li a {display:block; padding:6px 18px 0; height:26px; font-weight:bold; color:#999;}
#top-area .tab-box .tab-navi li.on {background:#fff; border-bottom:0; padding-bottom:1px;}
#top-area .tab-box .tab-navi li.on a {color:#000; }
#top-area .tab-box .content {width:544px; border-width:1px; border-style:solid; border-color:#ddd #c8c8c8;}
#top-area .tab-box .category {padding:16px 20px 0; height:69px; border-bottom:1px solid #c8c8c8;}
#top-area .tab-box .category li {float:left; width:72px; text-align:center;}
#top-area .tab-box .category li .icon {height:36px;}
#top-area .tab-box .category li a {color:#666; cursor:pointer;}
#top-area .tab-box .category .icon a {float:left; position:relative; margin-left:20px; width:32px; height:32px; overflow:hidden;} 
#top-area .tab-box .category .icon span {position:absolute; left:0; top:0; width:32px; height:105px; background:url(../image/spot/map_ico_cate.png) no-repeat;} 
#top-area .tab-box .category .cate-all span {background-position:0 0;} 
#top-area .tab-box .category .cate-A span {background-position:-35px 0;} 
#top-area .tab-box .category .cate-B span {background-position:-70px 0;} 
#top-area .tab-box .category .cate-C span {background-position:-105px 0;} 
#top-area .tab-box .category .cate-D span {background-position:-140px 0;} 
#top-area .tab-box .category .cate-E span {background-position:-175px 0;} 
#top-area .tab-box .category .cate-F span {background-position:-210px 0;} 
#top-area .tab-box .category .icon a:hover span {top:-35px;}
#top-area .tab-box .category li.on .name a {color:#000; font-weight:bold;} 
#top-area .tab-box .category li.on .icon span {top:-70px;}
#top-area .tab-box .category li.hover .name a {color:#03a2d0;} 
#top-area .tab-box .category li.hover .icon span {top:-35px;} 
#top-area .tab-box .search {padding:20px 0 0 39px; height:65px; border-bottom:1px solid #c8c8c8; display:none;}
#top-area .tab-box .search input {float:left; width:446px; padding:5px 8px 6px; font-size:20px; font-weight:bold; line-height:24px; border:2px solid #03a2d0; background:url(../image/common/bg_input.png) no-repeat;}
#top-area .tab-box.search .search {display:block;}
#top-area .tab-box.search .category {display:none;}
#top-area .area {float:left; margin-top:55px;}
#top-area .area .in {float:left; margin-top:6px; width:42px; font:bold 24px/24px calibri; color:#666;}
#top-area .area fieldset {float:left; position:relative;}
#top-area .area input.city-keyword {float:left; width:284px; padding:5px 8px 6px; font-size:20px; font-weight:bold; line-height:24px; height:24px; border:1px solid #b4b4b4; background:url(../image/common/bg_input.png) repeat-x;}
#top-area .area input.city-keyword.empty {background-color:#f8f8f8; color:#b7b7b7; font-weight:normal;}
#top-area .area input.city-keyword.required {border:1px solid #03a2d0;}
#top-area .area button {float:left; margin-left:5px;}
#top-area .area .auto-search-result {top:37px; width:300px; z-index:500;}
#top-area .area .guide {clear:left; padding-top:5px; color:#b8b8b8; font-size:11px;}


/* 서브 카테고리 선택 */
#category .bg {height:36px; border:1px solid #fff; border-width:1px 0; background:url(../image/common/bg_slant.png);}
#category ul {position:absolute; top:5px; left:14px; height:34px; min-width:980px; }
#category li {float:left; border:1px solid #c8c8c8; margin-right:-1px; color:#999; font-weight:bold; background:#f7f7f7;}
#category li a {display:block; padding:6px 20px 0; height:26px; color:#999; font-weight:bold;}
#category li.on {background:#fff; border-bottom:0; padding-bottom:1px;}
#category li.on a {color:#000;}
#category.compact li a {padding:6px 14px 0;}

/* 스팟 목록 영역 */
#list-area .inner {position:relative; width:450px; min-height:100%; margin:0 auto;}
#list-area .spot-list .total {padding-top:10px; height:30px; text-align:center; color:#999;}
#list-area .spot-list .total em {color:#24364a; font-weight:bold;}
#list-area .spot-list .total a {color:#03a2d0; font-weight:bold;}
#list-area .spot-list ul {border-top:1px solid #e0e0e0; vertical-align:top;}
#list-area .spot-list li {position:relative; padding:22px 0 18px 27px; border-bottom:1px solid #e0e0e0; zoom:1}
#list-area .spot-list li.hover {background:#f7f7f7;}
#list-area .spot-list li .marker {position:absolute; top:20px; left:0; width:22px; height:21px; text-align:center; padding-top:4px; color:#fff; font:bold 11px calibri; background:url(../image/maps/bg_mark_spot.png) no-repeat;}
#list-area .spot-list li .name {height:29px; font-size:16px; line-height:21px;}
#list-area .spot-list li .name img {margin-right:3px;}
#list-area .spot-list li .name a {color:#000; font-weight:bold;}
#list-area .spot-list li .name .food {font-size:11px; font-weight:bold; color:#ea3f13;}
#list-area .spot-list li .type {height:23px; color:#999;}
#list-area .spot-list li .type em {font-weight:bold;}
#list-area .spot-list li .intro {height:23px; font-size:11px; color:#666; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#list-area .spot-list li .state {height:15px; overflow:hidden; font:12px/14px calibri; color:#666;}
#list-area .spot-list li .state .num {float:left; margin-left:3px;}
#list-area .spot-list li .score {float:left; width:100px;}
#list-area .spot-list li .score .star {float:left; margin-right:2px; width:14px; height:13px; background:url(../image/spot/map_star_s.png) no-repeat;}
#list-area .spot-list li .score .star.full {background-position:-15px 0;}
#list-area .spot-list li .score .star.half {background-position:-30px 0;}
#list-area .spot-list li .score .star.half {background-position:-30px 0;}
#list-area .spot-list li .heart {float:left; margin:2px 1px 0 0; width:14px; height:11px; background:url(../image/common/ico_like_s.png) no-repeat;}
#list-area .spot-list li .comment {margin-top:11px; padding-top:10px; border-top:1px dashed #d1d1d1; color:#666; font-size:11px;}
#list-area .spot-list li .comment .profile {float:left; width:30px; height:30px; margin:3px 10px 0 0;}
#list-area .spot-list li .btn-like {position:absolute; top:22px; right:0; width:55px; height:23px; background:url(../image/common/map_btn_state.png) no-repeat;}
#list-area .spot-list li .btn-like:hover,
#list-area .spot-list li .btn-like.on {background-position:-60px 0;}
#list-area .spot-list li .btn-like.on {cursor:default;}
#list-area .spot-empty {padding-top:23px;}
#list-area .spot-empty h3 {height:40px; color:#000; font-size:14px;}
#list-area .spot-empty p {color:#666; line-height:20px;}
#list-area .spot-empty p a {color:#03a2d0; font-weight:bold;}
#list-area .spot-empty .register {position:absolute; bottom:0; left:0; width:100%; padding-top:17px; height:57px; border-top:1px solid #e0e0e0;}
#list-area .spot-empty .register h3 {height:22px;}
#list-area .spot-empty .register button {position:absolute; width:83px; top:26px; right:0;}
#list-area .pagination {margin:-1px 0 10px;}

/* 맵 영역 */
#map-area .map {height:100%;}